<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodeMirror 6 完全指南</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    :root {
      --primary: #4a6fa5;
      --secondary: #6d9dc5;
      --dark: #1e2a3a;
      --light: #f8f9fa;
      --success: #4caf50;
      --warning: #ff9800;
      --danger: #f44336;
      --code-bg: #2d3748;
    }

    body {
      background: linear-gradient(135deg, var(--dark), #2c3e50);
      color: var(--light);
      min-height: 100vh;
      padding: 20px;
      line-height: 1.6;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    header {
      text-align: center;
      padding: 40px 0;
      margin-bottom: 30px;
    }

    h1 {
      font-size: 3.2rem;
      margin-bottom: 15px;
      background: linear-gradient(to right, #4facfe, #00f2fe);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .subtitle {
      font-size: 1.3rem;
      opacity: 0.9;
      max-width: 800px;
      margin: 0 auto 25px;
    }

    .card {
      background: rgba(30, 40, 60, 0.8);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      margin-bottom: 30px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .card-header {
      background: rgba(20, 30, 50, 0.9);
      padding: 20px 30px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .card-title {
      font-size: 1.8rem;
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .card-body {
      padding: 30px;
    }

    .editor-container {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
      height: 400px;
      background: var(--code-bg);
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      background: rgba(15, 25, 40, 0.95);
      padding: 15px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      flex-wrap: wrap;
      gap: 15px;
    }

    .toolbar-section {
      display: flex;
      gap: 15px;
      align-items: center;
      flex-wrap: wrap;
    }

    .btn {
      background: linear-gradient(to right, var(--primary), var(--secondary));
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s ease;
      font-weight: 500;
      font-size: 0.95rem;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      opacity: 0.9;
    }

    select,
    input {
      background: rgba(40, 50, 70, 0.9);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 10px 15px;
      border-radius: 6px;
      min-width: 150px;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 25px;
      margin-top: 20px;
    }

    .feature-card {
      background: rgba(35, 45, 65, 0.7);
      border-radius: 10px;
      padding: 25px;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .feature-card:hover {
      transform: translateY(-5px);
      background: rgba(40, 50, 75, 0.9);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }

    .feature-card h3 {
      font-size: 1.4rem;
      margin-bottom: 15px;
      color: #4facfe;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .feature-card h3 i {
      background: rgba(79, 172, 254, 0.2);
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
    }

    .feature-card ul {
      padding-left: 20px;
      margin-top: 10px;
    }

    .feature-card li {
      margin-bottom: 8px;
      position: relative;
      padding-left: 20px;
    }

    .feature-card li:before {
      content: "•";
      color: var(--secondary);
      position: absolute;
      left: 0;
      font-size: 1.2rem;
    }

    .code-block {
      background: rgba(0, 0, 0, 0.3);
      padding: 15px;
      border-radius: 8px;
      margin: 15px 0;
      font-family: 'Courier New', monospace;
      overflow-x: auto;
    }

    .code-block code {
      color: #a9dc76;
    }

    .highlight {
      color: #ff9e64;
      font-weight: bold;
    }

    .tabs {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .tab {
      padding: 12px 25px;
      background: rgba(40, 50, 70, 0.7);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .tab.active {
      background: linear-gradient(to right, var(--primary), var(--secondary));
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    footer {
      text-align: center;
      margin-top: 50px;
      padding: 30px;
      font-size: 0.95rem;
      opacity: 0.8;
    }

    .badge {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 0.8rem;
      font-weight: bold;
      margin-left: 10px;
    }

    .badge.primary {
      background: var(--primary);
    }

    .badge.success {
      background: var(--success);
    }

    .badge.warning {
      background: var(--warning);
      color: #333;
    }

    .badge.danger {
      background: var(--danger);
    }

    @media (max-width: 768px) {
      h1 {
        font-size: 2.4rem;
      }

      .card-body {
        padding: 20px;
      }

      .toolbar {
        flex-direction: column;
        align-items: stretch;
      }

      .editor-container {
        height: 300px;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <header>
      <h1><i class="fas fa-code"></i> CodeMirror 6 完全指南</h1>
      <p class="subtitle">
        现代Web应用程序的强大代码编辑器 - 安装、使用和扩展详解
      </p>
    </header>

    <div class="tabs">
      <div class="tab active" data-tab="editor">代码编辑器</div>
      <div class="tab" data-tab="install">安装指南</div>
      <div class="tab" data-tab="extensions">扩展功能</div>
      <div class="tab" data-tab="examples">使用示例</div>
    </div>

    <!-- 编辑器标签内容 -->
    <div class="tab-content active" id="editor-tab">
      <div class="card">
        <div class="card-header">
          <h2 class="card-title">
            <i class="fas fa-edit"></i> 交互式代码编辑器
          </h2>
        </div>
        <div class="card-body">
          <div class="toolbar">
            <div class="toolbar-section">
              <button class="btn" id="run-btn">
                <i class="fas fa-play"></i> 运行代码
              </button>
              <button class="btn" id="format-btn">
                <i class="fas fa-indent"></i> 格式化
              </button>
              <button class="btn" id="clear-btn">
                <i class="fas fa-trash"></i> 清空
              </button>
            </div>

            <div class="toolbar-section">
              <select id="theme-selector">
                <option value="default">默认主题</option>
                <option value="dark">One Dark</option>
                <option value="dracula">Dracula</option>
                <option value="solarized">Solarized Light</option>
                <option value="material">Material Dark</option>
              </select>

              <select id="language-selector">
                <option value="javascript">JavaScript</option>
                <option value="html">HTML</option>
                <option value="css">CSS</option>
                <option value="python">Python</option>
                <option value="java">Java</option>
                <option value="php">PHP</option>
              </select>

              <label>
                <input type="checkbox" id="line-numbers" checked /> 行号
              </label>
            </div>
          </div>

          <div class="editor-container" id="editor"></div>

          <div class="output-container" style="
              margin-top: 20px;
              background: rgba(0, 0, 0, 0.3);
              padding: 15px;
              border-radius: 8px;
            ">
            <h3><i class="fas fa-terminal"></i> 控制台输出</h3>
            <div id="output" style="
                margin-top: 10px;
                min-height: 80px;
                font-family: monospace;
                white-space: pre-wrap;
              "></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 安装指南标签内容 -->
    <div class="tab-content" id="install-tab">
      <div class="card">
        <div class="card-header">
          <h2 class="card-title">
            <i class="fas fa-download"></i> 安装 CodeMirror 6
          </h2>
        </div>
        <div class="card-body">
          <h3>通过 npm 安装</h3>
          <div class="code-block">
            <code>npm install @codemirror/view @codemirror/state
              @codemirror/basic-setup</code>
          </div>

          <h3>通过 CDN 使用</h3>
          <div class="code-block">
            <code>&lt;script type="module"><br />
              import { EditorView, basicSetup } from
              'https://cdn.jsdelivr.net/npm/codemirror@6.0.1/+esm';<br />
              import { javascript } from
              'https://cdn.jsdelivr.net/npm/@codemirror/lang-javascript@6.0.1/+esm';<br />
              // 其他导入...<br />
              &lt;/script></code>
          </div>

          <h3>基本使用示例</h3>
          <div class="code-block">
            <code>// 创建编辑器实例<br />
              const editor = new EditorView({<br />
              doc: "console.log('Hello, CodeMirror!');", // 初始内容<br />
              extensions: [<br />
              basicSetup, // 基本功能<br />
              javascript() // JavaScript语言支持<br />
              ],<br />
              parent: document.getElementById('editor') // 容器元素<br />
              });</code>
          </div>
        </div>
      </div>
    </div>

    <!-- 扩展功能标签内容 -->
    <div class="tab-content" id="extensions-tab">
      <div class="card">
        <div class="card-header">
          <h2 class="card-title">
            <i class="fas fa-puzzle-piece"></i> 扩展功能包
          </h2>
        </div>
        <div class="card-body">
          <div class="features-grid">
            <div class="feature-card">
              <h3><i class="fas fa-language"></i> 语言支持</h3>
              <ul>
                <li>
                  @codemirror/lang-javascript
                  <span class="badge primary">JS/TS</span>
                </li>
                <li>
                  @codemirror/lang-html <span class="badge warning">HTML</span>
                </li>
                <li>
                  @codemirror/lang-css <span class="badge primary">CSS</span>
                </li>
                <li>
                  @codemirror/lang-python
                  <span class="badge success">Python</span>
                </li>
                <li>
                  @codemirror/lang-java <span class="badge danger">Java</span>
                </li>
                <li>
                  @codemirror/lang-php <span class="badge warning">PHP</span>
                </li>
              </ul>
            </div>

            <div class="feature-card">
              <h3><i class="fas fa-palette"></i> 主题包</h3>
              <ul>
                <li>
                  @codemirror/theme-one-dark
                  <span class="badge dark">Dark</span>
                </li>
                <li>
                  @codemirror/theme-dracula
                  <span class="badge dracula">Dracula</span>
                </li>
                <li>
                  @codemirror/theme-material
                  <span class="badge material">Material</span>
                </li>
                <li>
                  @codemirror/theme-solarized
                  <span class="badge solarized">Solarized</span>
                </li>
                <li>
                  @codemirror/theme-xcode <span class="badge xcode">Xcode</span>
                </li>
              </ul>
            </div>

            <div class="feature-card">
              <h3><i class="fas fa-cogs"></i> 功能扩展</h3>
              <ul>
                <li>
                  @codemirror/autocomplete
                  <span class="badge primary">自动补全</span>
                </li>
                <li>
                  @codemirror/lint <span class="badge success">代码检查</span>
                </li>
                <li>
                  @codemirror/highlight
                  <span class="badge warning">语法高亮</span>
                </li>
                <li>
                  @codemirror/fold <span class="badge danger">代码折叠</span>
                </li>
                <li>
                  @codemirror/search <span class="badge primary">搜索替换</span>
                </li>
              </ul>
            </div>

            <div class="feature-card">
              <h3><i class="fas fa-tools"></i> 实用工具</h3>
              <ul>
                <li>
                  @codemirror/commands <span class="badge success">命令</span>
                </li>
                <li>
                  @codemirror/history
                  <span class="badge primary">历史记录</span>
                </li>
                <li>
                  @codemirror/panel <span class="badge warning">面板</span>
                </li>
                <li>
                  @codemirror/tooltip <span class="badge danger">工具提示</span>
                </li>
                <li>
                  @codemirror/view <span class="badge primary">核心视图</span>
                </li>
              </ul>
            </div>
          </div>

          <h3 style="margin-top: 30px">
            <i class="fas fa-code"></i> 扩展使用示例
          </h3>
          <div class="code-block">
            <code>// 添加自动补全功能<br />
              import { autocompletion } from '@codemirror/autocomplete';<br />
              <br />
              // 添加代码检查<br />
              import { lintGutter } from '@codemirror/lint';<br />
              <br />
              // 在编辑器扩展中使用<br />
              extensions: [<br />
              basicSetup,<br />
              javascript(),<br />
              oneDark,<br />
              autocompletion(),<br />
              lintGutter()<br />
              ]</code>
          </div>
        </div>
      </div>
    </div>

    <!-- 使用示例标签内容 -->
    <div class="tab-content" id="examples-tab">
      <div class="card">
        <div class="card-header">
          <h2 class="card-title">
            <i class="fas fa-laptop-code"></i> 使用示例
          </h2>
        </div>
        <div class="card-body">
          <div class="features-grid">
            <div class="feature-card">
              <h3><i class="fas fa-code-branch"></i> 创建编辑器</h3>
              <div class="code-block">
                <code>import { EditorView, basicSetup } from '@codemirror/view';<br />
                  import { javascript } from '@codemirror/lang-javascript';<br /><br />
                  const editor = new EditorView({<br />
                  doc: "// Your code here",<br />
                  extensions: [basicSetup, javascript()],<br />
                  parent: document.querySelector('#editor')<br />
                  });</code>
              </div>
            </div>

            <div class="feature-card">
              <h3><i class="fas fa-exchange-alt"></i> 获取/设置内容</h3>
              <div class="code-block">
                <code>// 获取编辑器内容<br />
                  const content = editor.state.doc.toString();<br /><br />
                  // 设置编辑器内容<br />
                  editor.dispatch({<br />
                  changes: {<br />
                  from: 0,<br />
                  to: editor.state.doc.length,<br />
                  insert: "// New content"<br />
                  }<br />
                  });</code>
              </div>
            </div>

            <div class="feature-card">
              <h3><i class="fas fa-sync-alt"></i> 动态更新配置</h3>
              <div class="code-block">
                <code>// 切换主题<br />
                  import { oneDark } from '@codemirror/theme-one-dark';<br /><br />
                  editor.dispatch({<br />
                  effects: EditorView.theme.reconfigure(oneDark)<br />
                  });<br /><br />
                  // 切换语言<br />
                  import { html } from '@codemirror/lang-html';<br /><br />
                  editor.dispatch({<br />
                  effects: StateEffect.reconfigure.of([<br />
                  basicSetup,<br />
                  html()<br />
                  ])<br />
                  });</code>
              </div>
            </div>

            <div class="feature-card">
              <h3><i class="fas fa-bell"></i> 事件处理</h3>
              <div class="code-block">
                <code>// 监听内容变化<br />
                  editor.dom.addEventListener('change', () => {<br />
                  console.log('Content changed:',<br />
                  editor.state.doc.toString());<br />
                  });<br /><br />
                  // 监听光标移动<br />
                  editor.contentDOM.addEventListener('keyup', (e) => {<br />
                  const pos = editor.state.selection.main.head;<br />
                  console.log('Cursor at position:', pos);<br />
                  });</code>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        <h2 class="card-title"><i class="fas fa-lightbulb"></i> 核心特性</h2>
      </div>
      <div class="card-body">
        <div class="features-grid">
          <div class="feature-card">
            <h3><i class="fas fa-bolt"></i> 高性能</h3>
            <p>
              CodeMirror 6
              使用虚拟渲染技术，即使处理大型文件也能保持流畅的编辑体验。
            </p>
          </div>

          <div class="feature-card">
            <h3><i class="fas fa-box-open"></i> 模块化架构</h3>
            <p>
              只加载你需要的功能，保持应用轻量级。所有功能都是可选的扩展包。
            </p>
          </div>

          <div class="feature-card">
            <h3><i class="fas fa-sync"></i> 实时协作</h3>
            <p>
              通过额外的扩展包支持实时协作编辑，允许多个用户同时编辑同一文档。
            </p>
          </div>

          <div class="feature-card">
            <h3><i class="fas fa-mobile-alt"></i> 移动友好</h3>
            <p>完全支持移动设备，提供触摸优化和虚拟键盘支持。</p>
          </div>
        </div>
      </div>
    </div>

    <footer>
      <p>
        CodeMirror 6 完全指南 &copy; 2023 | 现代Web开发必备的代码编辑器解决方案
      </p>
      <p style="margin-top: 10px; font-size: 0.9rem">
        <i class="fas fa-info-circle"></i> 此示例使用 CodeMirror 6.0.1 和 ES
        模块通过 CDN 加载
      </p>
    </footer>
  </div>

  <!-- 加载CodeMirror资源 -->
  <script type="module">
    // 从CDN导入CodeMirror模块
    import { EditorView, basicSetup } from 'https://cdn.jsdelivr.net/npm/codemirror@6.0.1/+esm';
    import { keymap } from 'https://cdn.jsdelivr.net/npm/@codemirror/view@6.0.1/+esm';
    import { EditorState } from 'https://cdn.jsdelivr.net/npm/@codemirror/state@6.0.1/+esm';

    // 导入语言支持
    import { javascript } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-javascript@6.0.1/+esm';
    import { html } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-html@6.0.1/+esm';
    import { css } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-css@6.0.1/+esm';
    import { python } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-python@6.0.1/+esm';
    import { java } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-java@6.0.1/+esm';
    import { php } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-php@6.0.1/+esm';

    // 导入主题
    import { oneDark } from 'https://cdn.jsdelivr.net/npm/@codemirror/theme-one-dark@6.0.1/+esm';
    import { dracula } from 'https://cdn.jsdelivr.net/npm/@codemirror/theme-dracula@6.0.1/+esm';
    import { solarizedLight } from 'https://cdn.jsdelivr.net/npm/@codemirror/theme-solarized@6.0.1/+esm';
    import { materialDark } from 'https://cdn.jsdelivr.net/npm/@codemirror/theme-material@6.0.1/+esm';

    // 导入其他扩展
    import { autocompletion } from 'https://cdn.jsdelivr.net/npm/@codemirror/autocomplete@6.0.1/+esm';
    import { lintGutter } from 'https://cdn.jsdelivr.net/npm/@codemirror/lint@6.0.1/+esm';

    // 初始代码内容
    const initialCode = {
      javascript: `// 欢迎使用CodeMirror 6
function calculateSum(a, b) {
    return a + b;
}

// 调用函数
const result = calculateSum(5, 7);

// 输出结果到控制台
console.log("计算结果:", result);

/*
 * CodeMirror 6 特性:
 * - 语法高亮
 * - 自动缩进
 * - 括号匹配
 * - 代码折叠
 * - 多种主题支持
 */`,
      html: `<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎使用CodeMirror 6</h1>
        <p>这是一个HTML示例</p>
    </div>
</body>
</html>`,
      css: `/* CSS示例 */
body {
    background-color: #f5f5f5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.button {
    display: inline-block;
    padding: 10px 20px;
    background: #4a6fa5;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.button:hover {
    background: #6d9dc5;
}`,
      python: `# Python示例
def fibonacci(n):
    """生成斐波那契数列"""
    a, b = 0, 1
    result = []
    while len(result) < n:
        result.append(a)
        a, b = b, a + b
    return result

# 打印前10个斐波那契数
print("斐波那契数列前10项:")
print(fibonacci(10))

# 使用列表推导式
squares = [x**2 for x in range(10)]
print("\\n0到9的平方:", squares)`,
      java: `// Java示例
public class HelloWorld {
    
    public static void main(String[] args) {
        System.out.println("Hello, CodeMirror 6!");
        
        int number = 7;
        System.out.println(number + "的阶乘是: " + factorial(number));
    }
    
    /**
     * 计算阶乘
     */
    public static long factorial(int n) {
        if (n <= 1) return 1;
        return n * factorial(n - 1);
    }
}`,
      php: `<?php
// PHP示例
class Greeting {
    private $name;
    
    public function __construct($name) {
        $this->name = $name;
    }
    
    public function sayHello() {
        return "Hello, " . $this->name . "! 欢迎使用CodeMirror 6";
    }
}

// 创建对象
$greeter = new Greeting("开发者");
echo $greeter->sayHello();

// 数组示例
$colors = array("red", "green", "blue");
echo "\\n\\n颜色列表:";
foreach ($colors as $color) {
    echo "\\n- " . $color;
}
?>`
    };

    // 创建编辑器状态
    let currentTheme = oneDark;
    let currentLanguage = 'javascript';

    const editorState = EditorState.create({
      doc: initialCode.javascript,
      extensions: [
        basicSetup,
        javascript(),
        autocompletion(),
        lintGutter(),
        currentTheme,
        keymap.of([
          {
            key: "Ctrl-Enter",
            run: () => {
              runCode();
              return true;
            }
          },
          {
            key: "Shift-Alt-F",
            run: formatCode
          }
        ])
      ]
    });

    // 创建编辑器实例
    const editor = new EditorView({
      state: editorState,
      parent: document.getElementById('editor')
    });

    // 主题切换功能
    document.getElementById('theme-selector').addEventListener('change', (e) => {
      const theme = e.target.value;
      console.log(theme, '主题切换');

      switch (theme) {
        case 'dark':
          currentTheme = oneDark;
          break;
        case 'dracula':
          currentTheme = dracula;
          break;
        case 'solarized':
          currentTheme = solarizedLight;
          break;
        case 'material':
          currentTheme = materialDark;
          break;
        default:
          // 默认主题
          currentTheme = [];
      }

      // 更新编辑器主题
      editor.dispatch({
        effects: EditorView.theme.reconfigure(currentTheme)
      });
    });

    // 语言切换功能
    document.getElementById('language-selector').addEventListener('change', (e) => {
      const lang = e.target.value;
      currentLanguage = lang;
      console.log(lang, '语言切换');

      let langExtension;

      switch (lang) {
        case 'html':
          langExtension = html();
          break;
        case 'css':
          langExtension = css();
          break;
        case 'python':
          langExtension = python();
          break;
        case 'java':
          langExtension = java();
          break;
        case 'php':
          langExtension = php();
          break;
        default:
          langExtension = javascript();
      }

      // 更新编辑器内容和语言
      editor.dispatch({
        changes: {
          from: 0,
          to: editor.state.doc.length,
          insert: initialCode[lang]
        },
        effects: StateEffect.reconfigure.of([
          basicSetup,
          langExtension,
          autocompletion(),
          lintGutter(),
          currentTheme
        ])
      });
    });

    // 运行代码
    function runCode() {
      const code = editor.state.doc.toString();
      const output = document.getElementById('output');

      // 在实际应用中，这里应该连接到后端执行代码
      // 这里只是一个模拟
      output.innerHTML = `<span style="color: #4facfe;">> 执行 ${currentLanguage} 代码...</span>\n`;

      // 模拟执行结果
      setTimeout(() => {
        if (currentLanguage === 'javascript') {
          output.innerHTML += '计算结果: 12\n';
          output.innerHTML += 'CodeMirror 6 特性:\n';
          output.innerHTML += '  - 语法高亮\n  - 自动缩进\n  - 括号匹配\n';
        } else if (currentLanguage === 'python') {
          output.innerHTML += '斐波那契数列前10项:\n[0, 1, 1, 2, 3, 5, 8, 13, 21, 34]\n\n';
          output.innerHTML += '0到9的平方:\n[0, 1, 4, 9, 16, 25, 36, 49, 64, 81]\n';
        } else {
          output.innerHTML += `代码执行成功 (${currentLanguage})!\n`;
          output.innerHTML += '输出长度: ' + code.length + ' 字符\n';
        }

        output.innerHTML += '\n<span style="color: #4caf50;">执行完成!</span>';
      }, 800);
    }

    // 格式化代码
    function formatCode() {
      alert(`代码格式化功能需要集成Prettier或其他格式化工具\n当前语言: ${currentLanguage}`);
    }

    // 清空编辑器
    document.getElementById('clear-btn').addEventListener('click', () => {
      if (confirm('确定要清空编辑器内容吗？')) {
        editor.dispatch({
          changes: {
            from: 0,
            to: editor.state.doc.length,
            insert: ''
          }
        });
      }
    });

    // 运行按钮
    document.getElementById('run-btn').addEventListener('click', runCode);
    document.getElementById('format-btn').addEventListener('click', formatCode);

    // 标签切换功能
    document.querySelectorAll('.tab').forEach(tab => {
      tab.addEventListener('click', () => {
        // 移除所有active类
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));

        // 添加active类到当前标签
        tab.classList.add('active');
        const tabId = tab.getAttribute('data-tab');
        document.getElementById(`${tabId}-tab`).classList.add('active');
      });
    });
  </script>
</body>

</html>